/**
 * @name: StartMenu
 * @Description:
 * @Author: 方琦
 * @Date: 2022/8/20 0:31
 **/
import React, {useEffect, useRef, useState} from 'react';
import {inject, observer} from "mobx-react";
import {useNavigate} from "react-router-dom";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {message, Modal} from 'antd';
import MenuList from "./MenuList";
import service from "../../service";
import footer from "./footer.module.css";


function StartMenu(props) {
    let timer;
    const {confirm} = Modal;
    const navigate = useNavigate();
    const [data, setData] = useState(props.userStore.userInfo.data[2].permission_information)
    const startMenuRef = useRef(null)
    const showConfirm = () => {
        confirm({
            title: '你确定要注销登录么？',
            icon: <ExclamationCircleOutlined/>,
            okText: '确定',
            cancelText: '取消',
            onOk() {
                service.userService.User_OutLogin().then(data => {
                    if (data.code === 200) {
                        message.success("注销成功");
                        sessionStorage.clear();
                        timer = setTimeout(() => {
                            navigate("/")
                        }, 1000)
                    } else {
                        message.warning("注销登录失败");
                    }
                }).catch(err => {
                    message.error("注销失败，请稍后再试！")
                })
            },

            onCancel() {
                props.menuStore.isDisplayStartMenu = false;
            },
        });
    };

    useEffect(() => {
        return () => {
            clearTimeout(timer);
            console.log("组件销毁了");
        }
    }, [])

    return (

        <div
            ref={startMenuRef}
            className={`${footer.bottomMenu} ${footer.clear}`}
            style={{display: props.menuStore.isDisplayStartMenu ? "block" : "none"}}>
            {/*左侧的菜单*/}
            <div className={footer.menuLeft}>
                {data && data.map((item, index) => {
                    return (
                        <MenuList menuType={2} item={item} index={index} key={item.id}/>
                    )
                })}
            </div>
            {/*右侧的菜单*/}
            <div className={footer.menuRight}>
                <div className={`${footer.menuTitle} ${footer.clear}`}>
                    <span>系统应用</span>
                    <span className="iconfont icon-caidan"></span>
                </div>
                <div className={footer.menuDiv}>
                    {props.menuStore.rightMenu.map((item, index) => {
                        return (
                            <MenuList menuType={3} item={item} index={index} key={item.id}/>
                        )
                    })}
                    <div className={footer.rightItem}
                         style={{width: "110px", backgroundColor: "#E0628A"}}
                         onClick={showConfirm}
                    >
                        < span className={footer.rightIcon + " iconfont icon-zhuxiaodenglu"}></span>
                        <span>注销登录</span>
                    </div>
                </div>
            </div>
        </div>

    )
}

export default inject("menuStore", "userStore")(observer(StartMenu))
